<template>
  <div style="height: 100%">
    <div class="query" ref="query" :class="{ formHeight: isHeight }">
      <slot name="form"></slot>
      <!-- <el-button
        type="text"
        class="moreQuery"
        v-show="showMoreQuery"
        @click="moreQuery"
      >
        更多条件<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button> -->
    </div>
    <div
      ref="autoTable"
      class="autoTable"
      :style="{ height: 'calc(100% - ' + (formHeight + 12) + 'px)' }"
    >
      <div class="table-box">
        <div class="query-btn">
          <slot name="btn"></slot>
        </div>
        <slot name="table"></slot>
      </div>
    </div>
  </div>
</template>
<script>
import { debounce } from "@/utils";
export default {
  name: "AutoForm",
  data() {
    return {
      isHeight: false,
      showMoreQuery: false,
      formHeight: "46",
      $_resizeHandler: null,
    };
  },
  activated() {
    if (!this.$_resizeHandler) {
      this.initListener();
    }
    this.resize();
  },
  mounted() {
    this.initListener();
    setTimeout(() => {
      this.resize();
    }, 0);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.$_resizeHandler);
  },
  methods: {
    moreQuery() {
      const el = this.$refs.query;
      if (el) {
        this.isHeight = !this.isHeight;
        setTimeout(() => {
          const formHeight =
            window
              .getComputedStyle(el, null)
              .getPropertyValue("height")
              .slice(0, -2) * 1;
          this.formHeight = formHeight;
        }, 100);
      }
    },
    destroyListener() {
      window.removeEventListener("resize", this.$_resizeHandler);
      this.$_resizeHandler = null;
    },
    initListener() {
      this.$_resizeHandler = debounce(() => {
        this.resize();
      }, 70);
      window.addEventListener("resize", this.$_resizeHandler, {
        passive: true,
      });
    },
    resize() {
      const el = this.$refs.query;
      if (el) {
        const formWidth =
          window
            .getComputedStyle(el, null)
            .getPropertyValue("width")
            .slice(0, -2) * 1;
        const formHeight =
          window
            .getComputedStyle(el, null)
            .getPropertyValue("height")
            .slice(0, -2) * 1;
        this.formHeight = formHeight;
        const itemList = document.querySelectorAll(
          ".query > .el-form > .el-form-item"
        );
        let itemsWidth = 0;
        itemList.forEach((element) => {
          const itemWidth =
            window
              .getComputedStyle(element, null)
              .getPropertyValue("width")
              .slice(0, -2) *
              1 +
            10;
          if (itemWidth === NaN) {
            itemsWidth += 0;
          } else {
            itemsWidth += itemWidth;
          }
        });
        if (itemsWidth > formWidth) {
          this.showMoreQuery = true;
          el.style.paddingRight = "90px";
        } else {
          this.showMoreQuery = false;
          el.style.paddingRight = "0px";
        }
      }
    },
  },
};
</script>
<style scoped lang="scss">
.query {
  // height: 50px;
  // overflow: hidden;
  transition: all 2s;
  border-bottom: 1px solid #e5e5e5;
  // margin-bottom: 12px;
  position: relative;
}
.formHeight {
  height: auto;
  overflow: visible;
}
.autoTable {
  flex: 1;

  .table-box {
    display: flex;
    gap: 12px;
    height: 100%;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
  }
}
.moreQuery {
  position: absolute;
  top: 0px;
  right: 10px;
}
</style>
